<template>
	<ge-page id="ge-page">
		<view class="top-box">
			<view class="userInfo-box">
				<view class="left-user" @click="storeSet">
					<image class="user-img" src="/static/default.png"></image>
					<view class="user-word">
						<view class="name">
							{{userInfo.userInfo.real_name}}
							<view class="role">
								店铺设置  
							</view>
						</view>
						<view class="phone">
							{{userInfo.userInfo.user_name}}
						</view>
						<view class="phone">
							{{storeInfo.full_address}}
						</view>
					</view>
				</view>
				<view   style="color:#fff;" @click="refresh">刷新</view>
			</view>
			<view  class="number-box">
				<view class="">
					销售情况
				</view>
				<view  class="number-box-data">
					<view style="text-align: center;">
						<view class="title-num">
							今日
						</view>
						<view class="all-num">
							{{storeStat.overview.orderTotalPrice.tday}}元
						</view>
					</view>
					<view style="text-align: center;">
						<view class="title-num">
							昨日
						</view>
						<view class="all-num">
							{{storeStat.overview.orderTotalPrice.ytd}}元
						</view>
					</view>  
				</view>
			</view>
		</view>

		<view class="menu-list">
      <view style="text-align: center;padding:0rpx 60rpx 60rpx 60rpx;">
        我的待办
      </view>
			<view  class="menu-list-data">
        <view class="menu-one" @click="handleOrder('waimai')">
          <view class="omg">
            <van-icon name="idcard" size="45rpx"></van-icon>
            <view class="red-num">
              {{storeStat.pending.waimaiOrderTotal}}
            </view>
          </view>
          <view class="menu-name">
            外卖单
          </view>
        </view>
        <view class="menu-one" @click="handleOrder('waimai')">
          <view class="omg">
            <van-icon name="idcard" size="45rpx"></van-icon>
            <view class="red-num">
              {{storeStat.pending.deliverOrderTotal}}
            </view>
          </view>
          <view class="menu-name">
            待配送
          </view>
        </view>
        <view class="menu-one" @click="handleOrder('tangshi')">
          <view class="omg">
            <van-icon name="idcard" size="45rpx"></van-icon>
            <view class="red-num">
              {{storeStat.pending.tangshiOrderTotal}}
            </view>
          </view>
          <view class="menu-name">
            堂食单
          </view>
        </view>
        <view class="menu-one" @click="handleOrder('after')">
          <view class="omg">
            <van-icon name="peer-pay" size="45rpx"></van-icon>
            <view class="red-num">
              {{storeStat.pending.refundTotal}}
            </view>
          </view>
          <view class="menu-name">
            待售后
          </view>
        </view>
      </view>
			
			<!-- <view class="menu-one" @click="handleOrder(4)">
				<view class="omg">
					<van-icon name="bulb-o" size="45rpx"></van-icon>
					<view class="red-num">
						99
					</view>
				</view>
				<view class="menu-name">
					库存预警
				</view>
			</view> -->
		</view>
		<view class="shop-list">
			<view class="shop-one" @click="handleProduct">
				<van-icon name="point-gift-o" size="55rpx"></van-icon>
				<view class="shop-name">
					商品管理
				</view>
			</view>
			<!-- <view class="shop-one" @click="handleOrder">
				<van-icon name="notes-o" size="55rpx"></van-icon>
				<view class="shop-name">
					订单管理
				</view>
			</view> -->
			<view class="shop-one" @click="handleProduct(3)">
				<view class="omg">
					<van-icon name="gift-o" size="55rpx"></van-icon>
					<view class="red-num">
						{{ storeStat.pending.soldoutGoodsTotal }}
					</view>
				</view>
				<view class="shop-name">
					已售罄
				</view>
			</view>
			<view class="shop-one" @click="handleCode">
				<van-icon name="scan" size="55rpx"></van-icon>
				<view class="shop-name">
					扫码核销
				</view>
			</view>
		</view>
		
		<view class="shop-list">
			<view class="shop-one" @click="salesReport">
				<van-icon name="orders-o" size="55rpx"></van-icon>
				<view class="shop-name">
					销售报表
				</view>
			</view>
			 
		</view>
	</ge-page>
</template>

<script>
	import { storageKey,appConfig } from '@/constant/config';
	export default {
		data() {
			return {
				
				storeInfo: {},
				userInfo:{
					userInfo:{real_name: "" }
				},
				storeStat: {},
			}
		},
		onLoad() {
			
		},
		created() {
			const hrefUrl = location.href;
			function getUrlKey(name) {
				return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(hrefUrl) || [,
					""
				])[1].replace(/\+/g, '%20')) || null;
			}
			uni.api.getUserInfo().then(res => {
				
				if (!res) {
					// 未登录 
					const code = getUrlKey('code');
					// 如果URL 没带code跳转
					if (!code) {
						window.location.replace(`${appConfig.domain}/api/index/getcode?id=1`);
					} else {
						uni.request({
							url: `${appConfig.domain}/api/index/getOpenid?id=1`,
							dataType: 'json',
							success: (res) => {
								// res.data.data.openid
								if (openid) {
									uni.request({
										url: `${appConfig.domain}/index.php?s=/store/passport/wxlogin`,
										data: {
											openid,
										},
										dataType: 'json',
										success: (res) => {
											uni.setStorageSync(storageKey.token, res.token);
											uni.setStorageSync(storageKey.userId, res.userId);
											uni.api.userInfo().then(res => {
												uni.setStorageSync(storageKey.userInfo, res);
												uni.reLaunch({
													url: '/pages/tabbar/tabbar'
												})
											})
										},
									})
								}else{
									//如果获取不到openid就跳转到账号密码登录页面
									window.location.href = '/storeadmin#/pages/order/login/index'
								}
							}
						})
					}
				} else {
					this.userInfo = res
					this.getStoreInfo()
					uni.api.fetchHomeStat().then(({ data }) => {
						this.storeStat = data;
					})
				}
			}) 
		},
		methods: {
			// 跳转到修改个人信息页
			handlePersonal() {
			  window.location.href = '/storeadmin#/pages/my/my'
			},
			refresh(){
				//清空登录信息，然后跳转到登录页面
				uni.setStorageSync(storageKey.token, "");
				location.reload();
			},
			handleProduct() {
				uni.reLaunch({
					url: '/pages/tabbar/tabbar?tabbar=product'
				}) 
			},
			salesReport(){
				uni.navigateTo({
					url: '/pages/order/tongji/index'
				})
			},
			storeSet(){
				console.log(111)
				uni.navigateTo({
					url: '/pages/store/index'
				})
			},
			handleOrder(value) {
				uni.reLaunch({
					url: '/pages/tabbar/tabbar?tabbar=order&active=' + value
				})

				/* uni.reLaunch({
					url: '/pages/tabbar/tabbar?tabbar=order&active=' + value
				}) */

			},
			handleCode() {
				uni.navigateTo({
					url: '/pages/write-off/index'
				})

			},
			
			getUserInfo(){
				let app = this
				uni.api.getUserInfo().then(res => {
					
					if (!res.err) {
						console.log(222,res)
						app.userInfo = res
					}
				})
			},
			
			getStoreInfo(){
				let app = this
				uni.api.storeInfo().then(res => {
					if (!res.err) {
						app.storeInfo = res.storeInfo
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #fafafa;
	}

	.top-box {
		background: linear-gradient(to right, #297efa, #03a9f7);
		height: 336rpx;
		margin-bottom: 60rpx;

		.userInfo-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;

			.left-user {
				display: flex;

				.name,
				.phone {
					color: #fff;
				}

				.name {
					display: flex;
					align-items: center;

					.role {
						margin-left: 10rpx;
						width: 80rpx;
						font-size: 20rpx;
						height: 35rpx;
						background-color: #ffa500;
						color: #fff;
						border-radius: 18rpx;
						padding: 5rpx;
						text-align: center;
					}
				}

				.phone {
					margin-top: 10rpx;
					font-size: 20rpx;
				}

				.user-img {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}
			}

			.sao-icon {
				width: 50rpx;
				height: 50rpx;
			}
		}

		.number-box {
			
			background-color: #fff;
		    text-align: center;
			width: 700rpx;
			padding: 20rpx 40rpx;
			box-sizing: border-box;
			border-radius: 30rpx;
			margin: 0 auto;
            .number-box-data {
				margin-top: 40rpx;
				display: grid;
				grid-template-columns: 1fr 1fr; /* 定义两列，每列占据相等的空间 */  
				grid-gap: 10px; /* 可选：定义网格项之间的间距 */
			}
			.title-num {
				color: #888;
			}

			.all-num {
				font-size: 40rpx;
				color: orange;
				margin-top: 5rpx;
			}

			.num-list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.num-one {
					width: 33%;
					padding: 10rpx;
					box-sizing: border-box;

					.price {
						font-size: 35rpx;
						text-align: center;

					}

					.price-tip {
						text-align: center;
						color: #999;
						font-size: 28rpx;

					}
				}
			}

		}
	}

	.menu-list {
		background-color: #fff;
		width: 700rpx;
		padding: 30rpx 40rpx;
		box-sizing: border-box;
		border-radius: 30rpx;
		margin: 0 auto;

    .menu-list-data{
      display: flex;
      justify-content: space-between;
    }
		.menu-one {
			width: 20%;
			text-align: center;

			.omg {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				background-color: #f3f3f3;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 0 auto;
				position: relative;
			}


			.red-num {
				position: absolute;
				right: -25rpx;
				top: -20rpx;
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				background-color: orange;
				color: #fff;
				font-size: 16rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.menu-name {

				font-size: 26rpx;

			}
		}
	}

	.shop-list {
		background-color: #fff;
		width: 700rpx;
		padding: 30rpx 40rpx;
		box-sizing: border-box;
		border-radius: 30rpx;
		margin: 20rpx auto 0;
		display: flex;
		justify-content: space-between;

		.shop-one {
			width: 25%;
			text-align: center;
			.omg {
				width: 80rpx;
				/* height: 80rpx; */
				border-radius: 50%;
				/* background-color: #f3f3f3;
				display: flex; */
				align-items: center;
				justify-content: center;
				margin: 0 auto;
				position: relative;
			}
			.red-num {
				position: absolute;
				right: -16rpx;
				top: -20rpx;
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				background-color: orange;
				color: #fff;
				font-size: 16rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.menu-name { 
				font-size: 26rpx; 
			}
			.shop-img {
				width: 50rpx;
				height: 50rpx;
			}

			.shop-name {

				font-size: 26rpx;

			}
		}
	}
</style>